<template>
  <div class="app-container" v-loading="loading">
    <div>
      <leaseContract state="detail" v-model="form.replacementCar" />
      <carReplacementService state="detail" v-model="form.replacementCar" />
      <vehicleInformationZD state="detail" v-model="form.replacementCar" />
    </div>
    <CommonContainer title="替车出库信息">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="top">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="出库时间" prop="outStorageTime">
              <el-date-picker style="width: 100%" v-model="form.outStorageTime" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="datetime" placeholder="选择出库时间"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出库里程(km)" prop="outboundMileage">
              <el-input v-model="form.outboundMileage" placeholder="请输入出库里程"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出库油量(%)" prop="outboundOilQuantity">
              <el-input v-model="form.outboundOilQuantity" placeholder="请输入出库油量"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="上传交车单" prop="deliveryNoteOss">
              <image-common v-model="form.deliveryNoteOss" :up-type="2" :limit="1" info="交车单"></image-common>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出库里程表" prop="outboundMileageOss">
              <image-common v-model="form.outboundMileageOss" :up-type="2" :limit="1" info="里程表"></image-common>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出库油量表" prop="outboundOilQuantityOss">
              <image-common v-model="form.outboundOilQuantityOss" :up-type="2" :limit="1" info="油量表"></image-common>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" placeholder="若有新车前替车场景，请在备注中填写替车时效并上传有关附件" v-model="form.remark" maxlength="500" :rows="5" show-word-limit></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="车头照片" prop="outboundCarOss">
              <div class="flex">
                <image-common :up-type="2" info="上传附件" :limit="20" v-model="form.outboundCarOss"></image-common>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </CommonContainer>
    <div class="card-wrap flex justify-end card-padding">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
      <el-button type="primary" @click="submitForm">提交审批</el-button>
    </div>
  </div>
</template>

<script>
import leaseContract from '@/views/carInventory/components/leaseContract.vue'
import carReplacementService from '@/views/vehicleOrder/suborderManagement/components/carReplacementService.vue'
import vehicleInformationZD from '@/views/vehicleOrder/suborderManagement/components/vehicleInformationZD.vue'
import * as outInventoryApi from '@/api/carInventory/outInventory'
export default {
  name: 'OutInventoryTch',
  components: { leaseContract, carReplacementService, vehicleInformationZD },
  props: {},
  data() {
    return {
      form: {
        replacementCar: {},
        carOutStorage: {},
        outboundId: this.$route.query.id, //入库id
        outboundMileage: null, //出库里程
        outboundMileageOss: undefined, //出库里程附件
        outboundOilQuantity: undefined, //入库油量
        outboundOilQuantityOss: undefined, //出库油量附件
        outboundCarOss: undefined, //附件
        remark: null, //备注,
        outStorageTime: undefined, //出库时间
        deliveryNoteOss: undefined,
      },
      loading: false,
      rules: {
        outboundMileage: [
          { required: true, message: '请输入出库里程', trigger: 'blur' },
          { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输⼊正确的格式,可保留两位⼩数' },
        ],
        outboundMileageOss: [{ required: true, message: '请上传出库里程表照片', trigger: 'change' }],
        outStorageTime: [{ required: true, message: '请选择出库时间', trigger: 'change' }],
        outboundOilQuantity: [
          { required: true, message: '请输入出库油量', trigger: 'blur' },
          { pattern: /^[0-9]*$/, message: '请输入正整数' },
        ],
        outboundOilQuantityOss: [{ required: true, message: '请上传出库油量照片', trigger: 'change' }],
        deliveryNoteOss: [{ required: true, message: '请上传上传交车单', trigger: 'change' }],
        outboundCarOss: [{ required: true, message: '请上传车头照片', trigger: 'change' }],
      },
    }
  },
  computed: {},
  methods: {
    // 获取出 库单详情
    getDetail() {
      this.loading = true
      outInventoryApi
        .replacementCarOutStorage(this.$route.query.orderId)
        .then((res) => {
          if (res.code == 200) {
            this.loading = false
            this.form = {
              ...res.data,
              replacementCar: {
                ...res?.data?.replacementCar,
              },
              carOutStorage: { ...res?.data?.carOutStorage },
              outboundId: this.$route.query.id, //入库id
              outboundMileage: res?.data?.carOutStorage.outboundMileage || undefined, //出库里程
              outboundMileageOss: res?.data?.carOutStorage.outboundMileageOss || undefined, //出库里程附件
              outboundOilQuantity: res?.data?.carOutStorage.outboundOilQuantity || undefined, //入库油量
              outboundOilQuantityOss: res?.data?.carOutStorage.outboundOilQuantityOss || undefined, //出库油量附件
              outboundCarOss: res?.data?.carOutStorage.outboundCarOss || undefined, //附件
              remark: res?.data?.carOutStorage.remark, //备注,
              outStorageTime: res?.data?.carOutStorage.outStorageTime || undefined, //出库时间
              deliveryNoteOss: res?.data?.carOutStorage.deliveryNoteOss || undefined,
            }
          }
        })
        .catch((err) => {
          this.loading = false
        })
    },
    savaObj(type) {
      const loading = this.$loading({
        lock: true,
        text: type == 1 ? '保存中' : '提交中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      let data = {
        ...this.form,
        carOutStorage: {
          ...this.form.carOutStorage,
          outboundMileage: this.form.outboundMileage,
          outboundMileageOss: this.form.outboundMileageOss,
          outboundOilQuantity: this.form.outboundOilQuantity,
          outboundOilQuantityOss: this.form.outboundOilQuantityOss,
          outboundCarOss: this.form.outboundCarOss,
          remark: this.form.remark,
          outStorageTime: this.form.outStorageTime,
          saveFlag: type,
          outboundId: this.$route.query.id, //入库id
          deliveryNoteOss: this.form.deliveryNoteOss,
        },
      }
      outInventoryApi
        .replacementCarOutStorageSave(data)
        .then((res) => {
          if (res.code == 200) {
            loading.close()
            type == 1 ? this.$message.success('保存成功') : this.$message.success('提交成功')
            this.cancel()
          }
        })
        .catch(() => {
          loading.close()
        })
    },
    //保存
    save() {
      this.savaObj(1)
    },
    //保存|提交
    submitForm(type) {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.savaObj(2)
        } else {
          this.error()
        }
      })
    },
    cancel() {
      this._toPage({
        name: 'OutInventoryList',
      })
    },
    error() {
      this.$nextTick(() => {
        const el = document.querySelectorAll('.el-form-item__error')[0]
        el.scrollIntoView({ block: 'center', behavior: 'smooth' })
      })
    },
  },
  mounted() {
    this.getDetail()
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
  padding: 0;
}

.el-form-item {
  margin-bottom: 15px;
  width: 70%;
}
</style>
